<template>
  <div id="energy_big_charts" ></div>
</template>
<script>
export default {
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("energy_big_charts"))
      
      const labelName = ['11:00', '12:00', '13:00','14:00','15:00']
      const data1 = [166,27,108,212,300]
      const data2 = [300,205,176,118,291]
      const option = {
          // backgroundColor: '#000',
          title: {
              text: '电量（度）',
              textStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.16)
              }
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              icon: 'circle',
              data: ['用电量', '发电量'],
              textStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.14)
              },
              itemWidth: this.$options.filters.fontSize(0.12),
              itemHeight: this.$options.filters.fontSize(0.12),
              right: '10%'
          },
          grid: {
              top: '20%',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
              show: false,
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
          type: 'category',
            boundaryGap: true,//坐标轴两边留白
          data: labelName,
          axisLabel: { //坐标轴刻度标签的相关设置。
            interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
            textStyle: {
              color: '#fff',
              fontSize: this.$options.filters.fontSize(0.16),
            },
            formatter:function(params) {
                      var newParamsName = "";
                      var paramsNameNumber = params.length;
                      var provideNumber = 5;  //一行显示几个字
                      var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                      if (paramsNameNumber > provideNumber) {
                          for (var p = 0; p < rowNumber; p++) {
                              var tempStr = "";
                              var start = p * provideNumber;
                              var end = start + provideNumber;
                              if (p == rowNumber - 1) {
                                  tempStr = params.substring(start, paramsNameNumber);
                              } else {
                                  tempStr = params.substring(start, end) + "\n";
                              }
                              newParamsName += tempStr;
                          }

                      } else {
                          newParamsName = params;
                      }
                      return newParamsName
                  },
            //rotate:50,
          },
          axisTick:{//坐标轴刻度相关设置。
            show: false,
          },
          axisLine:{//坐标轴轴线相关设置
            lineStyle:{
              color:'rgba(255,255,255,0.1)',
              // opacity:0.2
            }
          },
          splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
            // 	opacity:0.1
            }
          }
          },
          yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.16),
              }
            },
            axisLine:{
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)',
              // 	opacity:0.1
              }
            }

          }
        ],
          series: [
              {
                  name: '用电量',
                  type: 'line',
                  symbol: 'circle',
                  symbolSize: this.$options.filters.fontSize(0.06),
                  itemStyle: {
                  normal: {
                color:'#5482C0',
                      lineStyle: {
                  color: "#5482C0",
                  width:1
                      },
                      areaStyle: { 
                  color: 'transparent'
                      }
                  }
            },
                  data: data1
              },
              {
                  name: '发电量',
                  type: 'line',
                  symbol: 'circle',
                  symbolSize: this.$options.filters.fontSize(0.06),
                  itemStyle: {
                      normal: {
                      color:"#C08754",
                      lineStyle: {
                        color: "#C08754",
                        width:1
                      },
                      areaStyle: { 
                        color: 'transparent',
                      }
                  }
                  
            },
                  data: data2
              }
          ]
      };



      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
#energy_big_charts {
  width: 100%;
  height: 100%;
}
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>